<template>
  <div class="mod-config">
    <div v-if="member">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()" ref="dataForm">
        <el-form-item>
          <el-input v-model="dataForm.userId" placeholder="uid"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.nickname" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.number" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type='primary' @click="download()">下载</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
      >
        <el-table-column prop="userId" header-align="center" align="center" label="uid"></el-table-column>
        <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
        <el-table-column header-align="center" align="center" label="头像" width="100px">
          <template slot-scope="scope">
            <img style="width: 50px;" :src="scope.row.avatar" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="memberStartTime" header-align="center" align="center" label="会员开始时间"></el-table-column>
        <el-table-column prop="memberStartDays" header-align="center" align="center" label="会员开始天数"></el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column prop="nowSerialStudiesDays" header-align="center" align="center" label="连续学习天数"></el-table-column>
        <el-table-column prop="historySerialStudiesDays" header-align="center" align="center" label="历史学习天数"></el-table-column>
        <el-table-column prop="writeValidNoteDays" header-align="center" align="center" label="有效笔记日天数"></el-table-column>
        <el-table-column prop="bookId" header-align="center" align="center" label="学习记录" width="200px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookOrCheck(scope.row.userId)">查看学习记录</el-button>
            <el-button type="text" size="small" @click="lookOrCheckNote(scope.row.userId)">查看有效笔记</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

    </div>

    <!--积分明细-->
    <study-record v-if="studyVisiable" ref="integralList" @goBack="showMember"></study-record>
    <note-record v-if="noteVisiable" ref="noteRecord" @goBack="showMember"></note-record>
  </div>
</template>

<script>
  import StudyRecord from './studyRecord'
  import NoteRecord from './noteRecord'
  export default {
    data() {
      return {
        noteVisiable: false,
        studyVisiable: false,
        member: true,
        dataForm1: {
          labelIds: []
        },
        dataForm: {
          reviewState: null,
          isPublic: '1',
          label: null
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
      }
    },
    components: {
      StudyRecord, NoteRecord
    },
    activated() {
      this.getDataList()
    },
    methods: {
      search() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.dataForm.isMember = 1
        this.$http({
          url: this.$http.adornUrl('/course/studydurationstatistics/list'),
          method: 'get',
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$refs['dataForm'].resetFields()
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      lookOrCheck(id) {
        this.member = false
        this.studyVisiable = true
        this.$nextTick(() => {
          this.$refs.integralList.getDataList(id)
        })
      },
      lookOrCheckNote(id) {
        this.member = false
        this.noteVisiable = true
        this.$nextTick(() => {
          this.$refs.noteRecord.getDataList(id)
        })
      },
      download() {
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.$http({
          url: this.$http.adornUrl("/course/studydurationstatistics/download"),
          method: "get",
          params: this.$http.adornParams(this.dataForm),
          headers: {
            'Content-Type': 'application/json; application/octet-stream'
          },
          responseType: 'arraybuffer'
        }).then(({ data }) => {
          const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          downloadElement.download = '学习记录.xls'
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        })
      },
      showMember() {
        this.member = true
        this.studyVisiable = false
        this.noteVisiable = false
      }
    }
  }
</script>
<style>
  .margin_10{
    margin-bottom: 10px;
  }
  .text_r{
    text-align: right;
    padding-right: 15px;
  }
  .inineBlock{
    display: inline-block;
  }
  img{
    width: 100%;
    height: auto;
  }
  .imgList{
    display: flex;
    flex-wrap: wrap;
  }
  .imgList>div{
    width: 80px;
    margin: 5px 15px 5px 0;
  }
</style>
